<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="bg-video">
        <video src="../assets/img/bg.mp4" ref="videoRef" autoplay loop muted></video>
      </div>
      <div class="bg-video-mask"></div>

      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 第一列-->
        <div class="list-left">
          <h2 class="list-left-1">{{ detailData.listLeft1Text }}</h2>
          <div class="list-left-2 box">
            <div class="list-left-2-text">
              <div>
                辖区内已有企业开展跨境电商相关业务
              </div>
              <div class="mt-1">
                <span class="list-left-2-num">
                  <count-to :startVal="0" :endVal="toNum(detailData.listLeft2Num)" :duration="duration" :decimals="0"  />
                  </span>
              家
              </div>
            </div>
          </div>
          <div class="list-left-3 box">
            <div class="list-left-2-text">
              1-9月通过跨境电商平台或独立站实现出口
              <span class="list-left-3-num">
                <count-to :startVal="0" :endVal="toNum(detailData.listLeft3Num)" :duration="duration" :decimals="1"  />
              </span>
              亿元
            </div>
            <div class="list-left-3-percent">
              <count-to :startVal="0" :endVal="toNum(detailData.listLeft3Percent)" :duration="duration" :decimals="0"  />
              %
            </div>
            <div class="list-left-3-percent-text">
              占全区比重
            </div>
          </div>

        </div>
        <!-- 第二列 -->
        <div class="list-middle">
          <div class="list-middle-1">
            <count-to :startVal="0" :endVal="toNum(detailData.listMiddle1Num)" :duration="duration" :decimals="0"  />
          家 外贸企业实现出口额
          </div>
          <div class="list-middle-2">
            <div class="img-num">
              <img v-for="(img,i) in getNumImg(detailData.listMiddle2Num)" :src="img.src" :key="i" :width="img.width"
                :height="img.height">
              <span class="list-middle-2-unit">亿元</span>
            </div>
          </div>
          <div class="list-middle-3">
            <div class="list-middle-3-text">同比增长
              <count-to :startVal="0" :endVal="toNum(detailData.listMiddle3Num)" :duration="duration" :decimals="1"  />%
            </div>
          </div>
          <div class="list-middle-3-img">
            <img src="../assets/img2/进度条2.png" alt="">
          </div>

          <div class="list-middle-4">
            <div class="list-middle-4-text">出口超10亿元企业
              <span class="list-middle-4-num">
                <count-to :startVal="0" :endVal="toNum(detailData.listMiddle4Num)" :duration="duration" :decimals="0"  />
                </span>
              家
            </div>
            <div class="list-middle-4-text text-2">出口超亿元企业

              <span class="list-middle-4-num">
                <count-to :startVal="0" :endVal="toNum(detailData.listMiddle5Num)" :duration="duration" :decimals="0"  /></span>
              家
            </div>
          </div>
          <div class="list-middle-5">
            {{ detailData.listMiddle5Text }}
          </div>
        </div>
        <!-- 第三列 -->

        <div class="list-right">

          <div class="list-right-1">
            <h3>浙江省跨境电商综合服务平台</h3>
            <div class="list-right-1-text">
              <div class="list-right-1-text-left">
                已集聚服务商
              </div>
              <div class="list-right-1-text-right">
                <span class="list-right-1-num">
                  <count-to :startVal="0" :endVal="toNum(detailData.listRight1Num)" :duration="duration" :decimals="0"  /></span>
                家
              </div>
            
            </div>
            <div class="bar-box"> 
                <img src="../assets/img2/右侧进度条2.png" style="left:45%" alt=""> 
              </div>

            <div class="list-right-1-text" style="padding-top:2vh;">
              <div class="list-right-1-text-left">
                未来力争在三年内累计服务
              </div>
              <div class="list-right-1-text-right">
                <span class="list-right-1-num">
                  <count-to :startVal="0" :endVal="toNum(detailData.listRight2Num)" :duration="duration" :decimals="0"  />
                  </span>
                家企业
              </div>
            </div>
            <div class="bar-box"> 
                <img src="../assets/img2/右侧进度条2.png" style="left:70%" alt=""> 
              </div>

            <div class="list-right-1-text" style="padding-top:1.5vh;">
              <div class="list-right-1-text-left">
                实现跨境电商出口
              </div>
              <div class="list-right-1-text-right">
                <span class="list-right-1-num">
                  <count-to :startVal="0" :endVal="toNum(detailData.listRight3Num)" :duration="duration" :decimals="0"  />
                  
                </span>
                亿人民币
              </div>
            </div>
            <div class="bar-box"> 
                <img src="../assets/img2/右侧进度条2.png" style="left:65%" alt=""> 
              </div>
          </div>

          <div class="list-right-2">

            <div class="list-right-1-text" style="padding-top:3vh;">
              <img src="../assets/img/亚马逊logo.png" width="200" alt="">
            </div>

            <div class="list-right-1-text" style="padding-top: 2vh;">
              <div class="list-right-1-text-left" >
                2023年，亚马逊亚太区卖家培训中心
              </div>
              
            </div>

            <div class="list-right-1-text"  style="padding-top: 1vh;">
              <div class="list-right-1-text-left">
                截至自前共培训
              </div>
              <div class="list-right-1-text-right">
                <span class="list-right-1-num">
                  <count-to :startVal="0" :endVal="detailData.listRight5Num" :duration="duration" :decimals="0"  />
                  </span>
                万人次
              </div>
            </div>

            <div class="bar-box"> 
                <img src="../assets/img2/右侧进度条2.png" style="left:75%" alt=""> 
              </div>

            <div class="list-right-1-text" style="padding-top: 1vh;">
              <div class="list-right-1-text-left">
                已培育产业带
              </div>
              <div class="list-right-1-text-right">
                <span class="list-right-1-num">
                  <count-to :startVal="0" :endVal="detailData.listRight6Num" :duration="duration" :decimals="0"  />
               </span>
                多个
              </div>
            </div>

            <div class="bar-box"> 
                <img src="../assets/img2/右侧进度条2.png" style="left:35%" alt=""> 
              </div>
            <div class="list-right-1-text"  style="padding-top: 2vh;">
              <div class="list-right-1-text-left">
                上线亚马逊开展<br />
                跨境电商业务
              </div>
              <div class="list-right-1-text-right">
                <span class="list-right-1-num">
                  <count-to :startVal="0" :endVal="detailData.listRight7Num" :duration="duration" :decimals="0"  />
                 </span>
                余家头部企业
              </div>
            </div>

            <div class="bar-box"> 
                <img src="../assets/img2/右侧进度条2.png" style="left:50%" alt=""> 
              </div>

          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to';
import drawMixin from "../utils/drawMixin";
// import { formatTime } from '../utils/index.js'
// import centerLeft1 from './centerLeft1.vue'
// import centerLeft2 from './centerLeft2.vue'
// import centerRight1 from './centerRight1.vue'
// import centerRight2 from './centerRight2.vue'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'
import img0 from '../assets/img/0.png'
import img1 from '../assets/img/1.png'
import img2 from '../assets/img/2.png'
import img3 from '../assets/img/3.png'
import img4 from '../assets/img/4.png'
import img5 from '../assets/img/5.png'
import img6 from '../assets/img/6.png'
import img7 from '../assets/img/7.png'
import img8 from '../assets/img/8.png'
import img9 from '../assets/img/9.png'
import imgDot from '../assets/img/dot.png'

import { post } from '../common/request.js';

export default {
  components: {
    countTo
  },
  mixins: [drawMixin],
  data() {
    return {
      duration: 10 * 1000,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000'],
      detailData: {
        listLeft1Text: '[外贸企业]业务数据看板',
        listLeft2Num: 123,
        listLeft3Num: 57.5,
        listLeft3Percent: 75,
        listMiddle1Num: 190,
        listMiddle2Num: 128.66,
        listMiddle3Num: 16.8,
        listMiddle4Num: 2,
        listMiddle5Num: 13,
        listMiddle5Text: '2024年1-10月',
        listRight1Num: 87,
        listRight2Num: 15000,
        listRight3Num: 100,
        listRight5Num: 1000,
        listRight6Num: 10,
        listRight7Num: 100
      }
    }
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
    const video = this.$refs.videoRef
    video.playbackRate = 0.5
    this.getData()

  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    toNum(num){
      return parseFloat(num || 0)
    },
    getData() {
      post('/api/common/list_data').then(res => {
        console.log(res)
        if (res.data){
          // eslint-disable-next-line no-debugger
          this.detailData = JSON.parse(res.data[0].data)
        }
        // this.detailData = res.data
      })
    },
    // 将数字拆成对应图片
    getNumImg(num) {
      const numArr = num.toString().split('')
      return numArr.map(item => {
        switch (item) {
          case '0': return { src: img0, width: 100, height: 100 };
          case '1': return { src: img1, width: 100, height: 100 };
          case '2': return { src: img2, width: 100, height: 100 };
          case '3': return { src: img3, width: 100, height: 100 };
          case '4': return { src: img4, width: 100, height: 100 };
          case '5': return { src: img5, width: 100, height: 100 };
          case '6': return { src: img6, width: 100, height: 100 };
          case '7': return { src: img7, width: 100, height: 100 };
          case '8': return { src: img8, width: 100, height: 100 };
          case '9': return { src: img9, width: 100, height: 100 };
          case '.': return { src: imgDot, width: 40, height: 40 };
        }
      })
    },
    timeFn() {
      
      this.timing = setInterval(() => {
        this.getData()
      }, 20 * 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
</style>
